<template>
	<view class="body">
		<title :title="titleFlag == 'bs' ? '报损' : '退件' + '原因：'"></title>
		<view class="checkbox">
			<u-checkbox-group @change="checkboxGroupChange" width="50%">
				<u-checkbox size="40rpx" shape="circle" v-model="item.checked" v-for="(item, index) in list" :key="item.id" :name="item.itemText">{{ item.itemText }}</u-checkbox>
			</u-checkbox-group>
		</view>
		<p class="btn"><u-button :disabled="disabled" type="primary" shape="circle" size="default" :ripple="true" @click="upload">提交</u-button></p>
	</view>
</template>

<script>
import title from '@/pages/index/components/title.vue';
export default {
	props: ['titleFlag'],
	components: {
		title
	},
	data() {
		return {
			list: [],
			reason: []
		};
	},
	computed: {
		// 没选择理由时仅用
		disabled() {
			if (this.reason.length > 0) {
				return false;
			} else {
				return true;
			}
		}
	},
	mounted() {
		//退件或者报损
		this.$store.dispatch(this.titleFlag == 'bs' ? 'getScrapReason' : 'getRefuseReason').then(res => {
			let list = res.data;
			list.forEach(item => {
				item.checked = false;
				console.log(item);
			});
			this.list = list;
			console.log(this.list);
		});
	},
	methods: {
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			this.reason = e;
			console.log(this.reason);
		},
		// 提交数据
		upload() {
			this.$emit('sOrSubmitData', this.reason);
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	padding: 20rpx 30rpx;
	position: relative;
	height: 100%;
}

.checkbox {
	margin-top: 20rpx;
}
.btn {
	position: absolute;
	left: 50rpx;
	right: 50rpx;
	bottom: 100rpx;
}
</style>
